<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>v-for</title>
    <script src="../../js/vue3.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        #app {
            margin: 2rem auto;
            width: 30%;
        }
        
        p {
            font-size: 1.3rem;
            margin: 1rem;
        }
        
        span {
            padding: 0.5rem;
            margin: 0.5rem;
            background-color: bisque;
            color: white;
            font-weight: bold;
        }
        
        span:hover {
            background-color: brown;
        }
        
        img {
            width: 20rem;
            height: 20rem;
        }
        
        .check {
            background-color: brown;
        }
    </style>
</head>

<body>
    <div id="app">
        <p>
            <span v-for="item in fruit" @click="chooseImg(item)" :class="{check:checked(item)}">{{item.name}}</span>

        </p>
        <p>
            <img :src="img">
        </p>


    </div>
    <script>
        const v_app = Vue.createApp({
            data() {
                return {
                    img: "../../img/img_0.png",
                    fruit: [{
                        name: "apple",
                        img: "../../img/img_0.png"
                    }, {
                        name: "orange",
                        img: "../../img/img_1.png"
                    }, {
                        name: "lemon",
                        img: "../../img/img_2.png"
                    }]
                }
            },
            methods: {
                chooseImg(item) {
                    this.img = item.img;
                },
                checked(item) {
                    if (this.img == item.img) {
                        return true
                    } else {
                        return false
                    }

                }
            },
        });
        v_app.mount("#app");
    </script>
</body>

</html>